<template>
<div class="weChatVideoList">
  <search-block type="flex">
    <template slot="button">
      <el-button type="primary" @click="search(true)">查询</el-button>
      <el-button type="primary" @click="addVideo">添加视频</el-button>
    </template>
    <el-form inline :model="model">
      <el-form-item label="标题:">
        <el-input v-model="model.title" clearable></el-input>
      </el-form-item>
      <el-form-item label="视频号:">
        <y-code-select
          v-model="model.finderUserName"
          clearable
          dict="WECHAT_CHANNELS_ID"></y-code-select>
      </el-form-item>
      <el-form-item label="是否发布:">
        <el-select v-model="model.publishStatus" clearable>
          <el-option label="发布" :value="1"></el-option>
          <el-option label="未发布" :value="0"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </search-block>
  <y-table
    ref="table"
    border
    pagination
    :getDataWay="getDataWay"
    :columns="columns">
    <el-table-column slot="picUrl" label="视频图片" align="center" header-align="center" width="100">
      <template v-slot="{row}">
        <img v-if="row.picUrl" style="height: 60px" :src="generateMediaUrl({fileOpenUrl: row.picUrl})"/>
      </template>
    </el-table-column>
    <el-table-column slot="publishStatus" label="发布" align="center" header-align="center" width="80">
      <template v-slot="{row}">
        <el-popconfirm
          :title="row.publishStatus === 0 ? '是否发布该视频？' : '是否下线该视频？'"
          @confirm="publishVideo(row)">
          <el-switch
            disabled
            slot="reference"
            v-model="row.publishStatus"
            :active-value="1"
            :inactive-value="0"></el-switch>
        </el-popconfirm>
      </template>
    </el-table-column>
    <el-table-column slot="y-oper" label="操作" align="center" header-align="center" width="150">
      <template v-slot="{row}">
        <div class="table-buttons">
          <el-button type="primary" size="mini" @click="editVideo(row)">编辑</el-button>
          <el-popconfirm
            title="是否确认删除该视频？"
            @confirm="delVideo(row)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
      </template>
    </el-table-column>
  </y-table>
  <y-form
    ref="yForm"
    v-model="forms.formModel"
    :visible.sync="forms.showForm"
    :title="forms.formTypeTitle[forms.formsType]"
    destroy-on-close
    width="900px"
    force-inner-scroll
    :form-attrs="forms.formAttrs"
    :columns="formColumns"
    @ensure="ensureModel">
  </y-form>
</div>
</template>

<script>
export default {
  name: "weChatVideoList",
  inject: ['generateMediaUrl', 'getDictNameSync'],
  computed: {
    getDataWay() {
      return {
        dataType: 'url',
        data: this.$api.applet.weChatVideoPage,
        param: this.model
      }
    },
    formColumns(){
      return [
        {
          label: "视频号",
          prop: "finderUserName",
          comp:{
            compType: 'YCodeSelect',
            attrs: {
              dict: 'WECHAT_CHANNELS_ID'
            }
          }
        },
        {
          label: "视频id",
          prop: "feedId",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 128,
              showWordLimit: true
            }
          }
        },
        {
          label: "视频标题",
          prop: "title",
          comp:{
            compType: 'input',
            attrs:{
              maxlength: 20,
              showWordLimit: true
            }
          }
        },
        {
          label: "视频图片",
          prop: "picUrl",
          comp:{
            compType: 'YUploadImg',
            attrs:{
              url: this.forms.formModel.picUrl ? [{
                url: this.forms.formModel.picUrl,
                id: this.forms.formModel.attachmentId
              }] : [],
              valueType: "ObjectArray",
              businessSysModuleCode: "WECHAT_VIDEO",
              limit: 1,
              reUpload: true,
              cropperOptions:{
                fixedNumber: [1, 1]
              }
            },
            listeners:{
              update: this.updateModel
            }
          }
        },
        {
          label: "视频日期",
          prop: "createDate",
          comp:{
            compType: 'datePicker',
            attrs: {
              type: "date",
              pickerOptions:{
                disabledDate(time) {
                  return time.getTime() > Date.now();
                },
                shortcuts: [{
                  text: '今天',
                  onClick(picker) {
                    picker.$emit('pick', new Date());
                  }
                }]
              },
              valueFormat: 'yyyy-MM-dd'
            }
          }
        }
      ]
    }
  },
  data(){
    return{
      model:{
        title: '',
        finderUserName: '',
        publishStatus: ''
      },
      columns: [
        {
          prop: 'finderUserName',
          label: '视频号',
          width: 120,
          formatter: (function(row){
            return this.getDictNameSync(row.finderUserName, 'WECHAT_CHANNELS_ID');
          }).bind(this)
        },
        {
          prop: 'picUrl',
          template: true,
        },
        {
          prop: 'title',
          label: '标题',
          minWidth: 100
        },
        {
          prop: 'createDate',
          label: '日期',
          width: 120
        },
        {
          prop: 'publishStatus',
          template: true,
        }
      ],
      forms:{
        formsType: '',
        formTypeTitle: {
          'ADD': '添加视频',
          'EDIT': '编辑视频'
        },
        formModel:{
          title: '',
          attachmentId: '',
          picUrl: '',
          feedId: '',
          finderUserName: '',
          createDate: ''
        },
        currentForm: null,
        showForm: false,
        formAttrs:{
          labelWidth: '100px',
          rules: {
            title: [{required: true, message: "请输入视频标题", trigger: "blur"}],
            picUrl: [{required: true, message: "请上传视频图片", trigger: "change"}],
            feedId: [{required: true, message: "请输入视频id", trigger: "blur"}],
            finderUserName: [{required: true, message: "请选择视频号", trigger: "change"}],
            createDate: [{required: true, message: "请选择视频日期", trigger: "change"}],
          }
        }
      },
    }
  },
  methods:{
    resetForm(){
      Object.keys(this.forms.formModel).map(key => {
        this.forms.formModel[key] = this.forms.currentForm ? this.forms.currentForm[key] : '';
      })
    },
    search(jumpToFirst){
      this.$refs['table'].loadData(this.model, jumpToFirst);
    },
    addVideo(){
      this.forms.formsType = 'ADD';
      this.forms.currentForm = null;
      this.resetForm();
      this.forms.showForm = true;
    },
    editVideo(row){
      this.forms.formsType = 'EDIT';
      this.forms.currentForm = row;
      this.resetForm();
      this.forms.showForm = true;
    },
    delVideo(row){
      this.$yAxios({
        url: this.$api.applet.removeWeChatVideo,
        data:{
          ids: [row.id]
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '删除成功'
        });
        this.search();
      })
    },
    updateModel({type, file}){
      switch(type) {
        case 'delete': {
          this.forms.formModel.attachmentId = '';
          this.forms.formModel.picUrl = '';
          break;
        }
        case 'edit': case 'add':{
          this.forms.formModel.attachmentId = file.id;
          this.forms.formModel.picUrl = file.name;
          this.$refs['yForm'].$refs['form'].validateField('picUrl');
          break;
        }
      }
    },
    publishVideo(row){
      this.$yAxios({
        url: this.$api.applet.publishWeChatVideo,
        data:{
          id: row.id,
          publishStatus: row.publishStatus ^ 1
        },
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: row.publishStatus === 0 ? '发布成功' : '下线成功'
        });
        this.search();
      })
    },
    ensureModel(form){
      let newForm;
      if(this.forms.formsType === 'EDIT'){
        newForm = Object.assign({}, this.forms.currentForm, form);
      }else{
        newForm = form;
      }
      this.$yAxios({
        url: this.$api.applet.saveWeChatVideo,
        data: newForm,
        loading: true
      }, info => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.search(this.forms.formsType === 'ADD');
      })
    }
  }
}
</script>

<style scoped>

</style>
